{include file='public/head' /}
<body style="padding-top: 0;height: 620px">
<link rel="stylesheet" href="/static/hry/dist/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        {volist name="dataList" id="vo"}
        <div class="swiper-slide">
            <div class="img-wrapper">
                <img src="{$vo.picture|default='/static/global/face/no-picture.jpg'}" alt="{$vo.project_name}">
            </div>
            <!--<a target="_parent" href="{:url('Project/detail',['id'=>$vo.id])}">-->
            <!--</a>-->
        </div>
        {/volist}
    </div>
</div>
</body>
{include file='public/load_bottom' /}
<script src="/static/hry/dist/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
        direction : 'horizontal', //滑动方向
        initialSlide :0,
        loop: true, // 循环模式选项
        slideToClickedSlide: true,
        speed:400,
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        slidesPerView : 4,
        centeredSlides : true,
    })
</script>
<style>
    .swiper-slide{
        height: 613px;
        display: flex;
        align-items: center;
    }
    .swiper-slide .img-wrapper{
        height: 558px;
        width: 448px
    }
    .swiper-slide .img-wrapper img{
        height: 100%;
        width: 100%
    }
    .swiper-slide-active .img-wrapper{
        transform: scaleY(1.1);
    }
</style>
</html>